<template>
  <div class="cart">
      <div class="cart-top">
          <div>30天无忧退货</div>
          <div>48小时快速退款</div>
          <div>满88元免邮费</div>
      </div>
      <div class="cart-list">
          <div class="cart-item" v-for="(item,index) in listData" :key="index">
              <div class="cart-content">
                  <div class="cart-left">
                      <div class="icon" @click="changeColor(index,item.goods_id)"
                       :class="[listIds[index] ? 'icon-active' : '']"></div>
                      <div class="img">
                          <img :src="item.list_pic_url" />
                      </div>
                      <div class="info">
                          <p>{{item.goods_name}}</p>
                          <p>￥{{item.retail_price}}</p>
                      </div>
                  </div>
                  <div class="cart-right">
                      <div class="num">x{{item.number}}</div>
                  </div>
              </div>
          </div>
      </div>

      <div class="footer">
          <div class="footer-left"
           @click="allCheck"
           :class="{'all-active': allcheck}">全选({{isCheckedNumber}})</div>
          <div class="footer-right">
              <div>￥{{allPrice}}</div>
              <div @click="orderDown">下单</div>
          </div>
      </div>
  </div>
</template>

<script>
import { get, post, getStorageOpenid } from '../../utils'
export default {
    data() {
        return {
            openId: '',
            listData: [],
            listIds: [],
            allcheck: false
        }
    },
    onShow() {
        this.openId = getStorageOpenid()
        this.getListData()
    },
    methods: {
        async getListData() {
            const data = await get('/cart/cartList', {
                openId: this.openId
            })
            // console.log(data)
            this.listData = data.data
        },
        // 往listIds中添加被选中的数据, 如果数据已经被添加上, 则将其改为false
        changeColor(index, id) {
            if(this.listIds[index]) {
                this.$set(this.listIds, index, false)
            } else {
                this.$set(this.listIds, index, id)
            }
        },
        allCheck() {
            // 点击清空选中
            this.listIds = []
            if(this.allcheck) {
                this.allcheck = false
            } else {
                this.allcheck = true
                // 点击全部选中: 将当前购物车中的数据全部添加到listIds中
                for(let i = 0; i < this.listData.length; i++) {
                    const element = this.listData[i]
                    this.listIds.push(element.goods_id)
                }
            }
        },
        // 已下单商品需从购物车中移除
        async orderDown() {
            if(this.listIds.length == 0) {
                wx.showToast({
                    title: '请选择商品！',
                    icon: 'none',
                    dureation: 1500
                })
                return false
            }
            // 往newGoodsId中添加需要被下单的商品数据
            let newGoodsId = []
            for(let i = 0; i < this.listIds.length; i++) {
                const element = this.listIds[i]
                if(element) {
                    newGoodsId.push(element)
                }
            }
            let goodsId = newGoodsId.join(',')
            const data = await post('/order/submitAction', {
                goodsId: goodsId,
                openId: this.openId,
                allPrice: this.allPrice
            })
            // console.log(data)
            if(data) {
                wx.navigateTo({
                    url: '/pages/order/main'
                })
            }
        }
    },
    computed: {
        isCheckedNumber() {
            let number = 0
            // 计算当前listIds中有多少条数据
            for(let i = 0; i < this.listIds.length; i++) {
                if(this.listIds[i]) {
                    number++
                }
            }
            // 当购物车中的数据全部在listIds中
            if(number == this.listData.length && number !== 0) {
                this.allcheck = true
            } else {
                this.allcheck = false
            }
            return number
        },
        allPrice() {
            let price = 0
            // 计算被勾选的总价格
            for(let i = 0; i < this.listIds.length; i++) {
                if(this.listIds[i]) {
                    price += this.listData[i].retail_price * this.listData[i].number
                }
            }
            return price
        }
    }
}
</script>

<style scoped>
@import './style.css';
</style>